<template>
  <div id="app-box">
    <div>
    <row gutter="20">
      <template v-for="grids in gridDatas">
      <template v-for="gridSingle in grids.children">
        <div
          :key="gridSingle.name"
          @click="clickGridItem(gridSingle)"
        >
          <col :label="gridSingle.title">
            <div style="text-align: center">
              <img
                height="64"
                width="64"
                :src="baseurl+gridSingle.icon"
                alt="gridSingle.name"
                @error="show_default_image"
              >
              <div style="text-align: center">
                {{ gridSingle.title }}
              </div>
            </div>
          </col>
        </div>
      </template>
      </template>
    </row>
</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {table} from '../api/http'
  import {Col, Row} from 'vant'

  export default {
  name: 'OdooGrid',
  components: {
    Row, Col

    // GroupTitle,

  },
  data: function () {
    return {
      cols: 4,
      headerTitle: '',
      gridDatas: [],
      baseurl:'https://www.kaikong.cn/'
    }
  },
  computed: {
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      isLoading: state => state.vux.isLoading,
      vux: state => state.vux,
      app_root: state => state.app_root
    })
  },
  beforeUpdate: function () {
    // this.isShowNav = true
    // this.NavShowBack = false
    // this.canNew = false
    // this.canEdit = false
    // this.canUnlink = false
    // this.NavShowSetting = true
    // this.model = null
    // this.currentView = 'grid'
  },
  mounted: function () {
    let self = this
    console.log(localStorage.getItem('remote_url'))
    this.$apollo.query({
      query: gql`query{
  modelMethod(model:"mobile.model",method:"get_menu")
}`,
      variables: {awargs: JSON.stringify(ids)}
    })
      .then(function (response) {
        if (response && response.data.modelMethod.ok) {
        } else if (response && !response.data.modelMethod.ok) {
          self.gridDatas = response.data
        }
      })
      .catch(function (error) {
        console.log(error, __filename)
      })

  },
  methods: {
    clickGridItem: function (gridSingle) {
      document.title = gridSingle.title
      this.$router.push(gridSingle.path)
    },
    show_default_image: function (event) {
      event.target.src = 'https://www.kaikong.cn/web/image?model=builder.ir.module.module&field=icon_image&id=11&unique='
    }
  }
}
</script>

<style>

  .overwrite-title-demo {
    margin-top: 5px;
  }
</style>
